<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>球局详情页原型</title>
  <style>
    /* ========== 全局重置 ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* ========== 全局样式 ========== */
    html, body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: #faf9f5;
      color: #333333;
      font-size: 14px;
      line-height: 1.4;
      height: 100%;
    }

    /* ========== 容器 ========== */
    .container {
      max-width: 480px;
      margin: 0 auto;
      background-color: #faf9f5;
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* ========== 顶部导航栏 ========== */
    .topNavBar {
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      padding: 10px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .navLeft {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .backButton {
      font-size: 20px;
      color: #333333;
      cursor: pointer;
      border: none;
      background: none;
      padding: 4px;
    }

    .navTitle {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }

    .iconButton {
      font-size: 20px;
      color: #333333;
      cursor: pointer;
      border: none;
      background: none;
      padding: 4px;
    }

    /* ========== 视频播放器区域 ========== */
    .videoPlayer {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background-color: #000000;
      overflow: hidden;
    }

    .videoPlaceholder {
      width: 100%;
      height: 100%;
      background-color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      color: #666666;
      font-size: 14px;
    }

    /* 占位符十字交叉线 */
    .videoPlaceholder::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 1px;
      background: linear-gradient(to right, transparent, #444444, transparent);
    }

    .videoPlaceholder::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 70%;
      background: linear-gradient(to bottom, transparent, #444444, transparent);
    }

    /* ========== 播放控制条 ========== */
    .controlBar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.75);
      padding: 12px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* 进度条区域 */
    .progressBarWrapper {
      position: relative;
      width: 100%;
    }

    .progressBar {
      width: 100%;
      height: 4px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      position: relative;
      cursor: pointer;
    }

    .progressFilled {
      height: 100%;
      background-color: #ffffff;
      border-radius: 2px;
      width: 0.64%;
      position: relative;
    }

    .progressThumb {
      position: absolute;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      background-color: #ffffff;
      border-radius: 50%;
      cursor: grab;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .progressThumb:active {
      cursor: grabbing;
    }

    /* 控制按钮组 */
    .controlButtons {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .controlLeft {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .controlRight {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .controlBtn {
      background: none;
      border: none;
      color: #ffffff;
      font-size: 16px;
      cursor: pointer;
      padding: 4px;
      transition: opacity 0.3s ease;
    }

    .controlBtn:hover {
      opacity: 0.8;
    }

    .playButton {
      font-size: 18px;
    }

    .timeDisplay {
      color: #ffffff;
      font-size: 14px;
      white-space: nowrap;
    }

    .speedButton {
      font-size: 14px;
      font-weight: 500;
    }

    .fullscreenButton {
      font-size: 16px;
    }

    /* ========== 视频类型筛选 ========== */
    .filterSection {
      background-color: #ffffff;
      padding: 10px;
      padding-bottom: 0;
    }

    .filterTabsWrapper {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .filterTabsWrapper::-webkit-scrollbar {
      display: none;
    }

    .filterTabs {
      display: flex;
      gap: 8px;
      white-space: nowrap;
    }

    .filterTab {
      padding: 6px 16px;
      background-color: #f5f5f5;
      color: #666666;
      font-size: 13px;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
    }

    .filterTab.active {
      background-color: #e8f4ff;
      color: #007aff;
      font-weight: 500;
    }

    .filterTab:hover:not(.active) {
      background-color: #eeeeee;
    }

    /* ========== 内容区域 ========== */
    .content {
      flex: 1;
      padding: 10px;
      background-color: #fff;
    }

    /* 视频列表 */
    .videoList {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    /* 视频卡片 */
    .videoCard {
      background-color: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .videoCard:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
    }

    .videoCard .thumbnail {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background-color: #e8e8e8;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 12px;
    }

    /* 占位符十字交叉线 */
    .videoCard .thumbnail::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 1px;
      background: linear-gradient(to right, transparent, #ccc, transparent);
    }

    .videoCard .thumbnail::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 70%;
      background: linear-gradient(to bottom, transparent, #ccc, transparent);
    }

    /* 缩略图上的统计信息 */
    .videoCard .stats {
      position: absolute;
      bottom: 8px;
      left: 8px;
      right: 8px;
      display: flex;
      justify-content: space-between;
      font-size: 11px;
    }

    .videoCard .viewCount {
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .videoCard .viewCount .icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: white;
      border-radius: 2px;
    }

    .videoCard .duration {
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
    }

    /* 卡片信息区 */
    .videoCard .info {
      padding: 10px 8px;
      background-color: white;
    }

    .videoCard .title {
      font-size: 13px;
      font-weight: 500;
      color: #333;
      margin-bottom: 6px;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .videoCard .location {
      font-size: 11px;
      color: #999;
    }

    /* 空状态 */
    .emptyState {
      text-align: center;
      padding: 60px 20px;
      color: #999999;
    }

    .emptyState .emptyIcon {
      width: 60px;
      height: 60px;
      border: 2px solid #cccccc;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: #cccccc;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }

    .emptyState .emptyText {
      font-size: 14px;
    }

    .hidden {
      display: none;
    }

    /* ========== 安全提示卡片 ========== */
    .securityTip {
      background-color: #e8f4fd;
      padding: 12px 16px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.6;
      color: #333333;
      display: flex;
      align-items: center;
      
      gap: 10px;
    }

    .securityTip .tipIcon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background-color: #2196f3;
      border-radius: 50%;
      color: #ffffff;
      font-weight: 600;
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .securityTip .tipContent {
      flex: 1;
      font-size: 12px;
    }

    /* ========== 响应式调整 ========== */
    @media (max-width: 375px) {
      .controlLeft,
      .controlRight {
        gap: 12px;
      }

      .timeDisplay {
        font-size: 12px;
      }

      .speedButton,
      .fullscreenButton {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="topNavBar">
      <div class="navLeft">
        <button class="backButton" onclick="history.back()">‹</button>
        <div class="navTitle">蓝天霸主局</div>
      </div>
    </div>

    <!-- 视频播放器区域 -->
    <div class="videoPlayer">
      <div class="videoPlaceholder">
        <span>视频占位</span>
      </div>

      <!-- 播放控制条 -->
      <div class="controlBar">
        <!-- 进度条 -->
        <div class="progressBarWrapper">
          <div class="progressBar" id="progressBar">
            <div class="progressFilled" id="progressFilled">
              <div class="progressThumb" id="progressThumb"></div>
            </div>
          </div>
        </div>

        <!-- 控制按钮组 -->
        <div class="controlButtons">
          <div class="controlLeft">
            <button class="controlBtn playButton" id="playButton">▶</button>
            <div class="timeDisplay">00:04 / 104:54</div>
          </div>
          <div class="controlRight">
            <button class="controlBtn speedButton" id="speedButton">1x</button>
            <button class="controlBtn fullscreenButton" id="fullscreenButton">全屏</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 安全提示卡片 -->
    <div class="securityTip">
      <div class="tipIcon">i</div>
      <div class="tipContent">绑定手机号即可长期保存赛事视频 & 球局数据（更换手机或微信后不会丢失）</div>
    </div>

    <!-- 视频类型筛选 -->
    <div class="filterSection">
      <div class="filterTabsWrapper">
        <div class="filterTabs">
          <button class="filterTab active" data-type="goal">进球集锦</button>
          <button class="filterTab" data-type="other">其他集锦</button>
          <button class="filterTab" data-type="ai">智能运动集锦</button>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 视频列表 -->
      <div class="videoList" id="videoList">
        <!-- 视频卡片1 -->
        <div class="videoCard">
          <div class="thumbnail">
            <span>视频缩略图</span>
            <div class="stats">
              <div class="viewCount">
                <span class="icon"></span>
                <span>8031</span>
              </div>
              <div class="duration">2:45</div>
            </div>
          </div>
          <div class="info">
            <div class="title">运动年代</div>
            <div class="location">鲲锐九人制球场足球场</div>
          </div>
        </div>

        <!-- 视频卡片2 -->
        <div class="videoCard">
          <div class="thumbnail">
            <span>视频缩略图</span>
            <div class="stats">
              <div class="viewCount">
                <span class="icon"></span>
                <span>3286</span>
              </div>
              <div class="duration">1:32</div>
            </div>
          </div>
          <div class="info">
            <div class="title">蒙牛足球队</div>
            <div class="location">鲲锐九人制球场足球场</div>
          </div>
        </div>
      </div>

      <!-- 空状态（默认隐藏） -->
      <div class="emptyState hidden" id="emptyState">
        <div class="emptyIcon">ICON</div>
        <div class="emptyText">暂无视频内容</div>
      </div>
    </div>
  </div>

  <script>
    // ========== 播放控制 ==========
    let isPlaying = false;
    let currentSpeed = 1;
    const speeds = [1, 1.5, 2];

    const playButton = document.getElementById('playButton');
    const speedButton = document.getElementById('speedButton');

    // 播放/暂停切换
    playButton.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playButton.textContent = isPlaying ? '⏸' : '▶';
    });

    // 倍速切换
    speedButton.addEventListener('click', () => {
      const currentIndex = speeds.indexOf(currentSpeed);
      const nextIndex = (currentIndex + 1) % speeds.length;
      currentSpeed = speeds[nextIndex];
      speedButton.textContent = currentSpeed + 'x';
    });

    // 全屏切换
    document.getElementById('fullscreenButton').addEventListener('click', () => {
      const videoPlayer = document.querySelector('.videoPlayer');
      if (!document.fullscreenElement) {
        videoPlayer.requestFullscreen().catch(err => {
          console.log('无法进入全屏模式:', err);
        });
      } else {
        document.exitFullscreen();
      }
    });

    // ========== 进度条拖动 ==========
    const progressBar = document.getElementById('progressBar');
    const progressFilled = document.getElementById('progressFilled');
    const progressThumb = document.getElementById('progressThumb');

    let isDragging = false;

    progressThumb.addEventListener('mousedown', (e) => {
      isDragging = true;
      e.preventDefault();
    });

    document.addEventListener('mousemove', (e) => {
      if (isDragging) {
        updateProgress(e);
      }
    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
    });

    progressBar.addEventListener('click', (e) => {
      updateProgress(e);
    });

    function updateProgress(e) {
      const rect = progressBar.getBoundingClientRect();
      const offsetX = e.clientX - rect.left;
      const percentage = Math.max(0, Math.min(1, offsetX / rect.width));
      progressFilled.style.width = (percentage * 100) + '%';
    }

    // ========== 视频类型筛选 ==========
    const filterTabs = document.querySelectorAll('.filterTab');
    const videoList = document.getElementById('videoList');
    const emptyState = document.getElementById('emptyState');

    filterTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        // 移除所有激活状态
        filterTabs.forEach(t => t.classList.remove('active'));
        // 添加当前激活状态
        tab.classList.add('active');

        const type = tab.getAttribute('data-type');
        console.log('切换到视频类型:', type);

        // 根据类型显示/隐藏视频列表
        if (type === 'goal') {
          // 进球集锦：显示视频列表
          videoList.classList.remove('hidden');
          emptyState.classList.add('hidden');
        } else {
          // 其他类型：显示空状态
          videoList.classList.add('hidden');
          emptyState.classList.remove('hidden');
        }
      });
    });

  </script>
</body>
</html>
